<template>
  <div class="container">
    <div class="app-container">

      <el-button style="margin: 10px;" type="primary" size="mini" @click="addPer(null,'parent')">添加权限</el-button>
      <el-table :data="list" default-expand-all row-key="id">
        <el-table-column label="名称" prop="name" />
        <el-table-column label="标识" prop="code" />
        <el-table-column label="描述" prop="description" />
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button v-if="row.type===1" type="text" @click="addPer(row,'add')">添加</el-button>
            <el-button type="text" @click="addPer(row,'edit')">编辑</el-button>
            <el-button type="text" @click="addPer(row,'del')">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <!-- 添加权限的弹框 -->
    <el-dialog :title="title" :visible.sync="dialogPermission" @close="close">
      <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="formData.name" style="width:90%" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="formData.code" style="width:90%" />
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="formData.description" style="width:90%" />
        </el-form-item>
        <el-form-item label="开启">
          <el-switch
            v-model="formData.enVisible"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-button type="primary" size="mini" @click="btnAdd">确定</el-button>
          <el-button type="primary" size="mini" @click="close">取消</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { getPermissionList, addPermission, delPermission, updatePermissionDetail, getPermissionDetail } from '@/api/permission'
import { transListToTreeData } from '@/utils'
export default {
  name: 'Permission',

  data() {
    return {
      list: [],
      dialogPermission: false,
      formData: {
        name: '', // 名称
        code: '', // 标识
        description: '', // 描述
        type: '', // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
        pid: '', // 因为做的是树 需要知道添加到哪个节点下了
        enVisible: '0' // 默认关闭
      },
      rules: {
        name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' },
          { trigger: 'blur', validator: async(rule, value, callback) => {
            let result = false
            if (this.formData.type === 2) {
              result = this.list.some(ite => {
                let status = false
                if (ite.children) {
                  ite.children.forEach(i => {
                    status = i.name === value
                  })
                }
                return status
              })
            } else {
              result = this.list.some(item => item.name === value)
            }
            result ? callback('权限点名称重复') : callback()
          } }
        ],
        code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' },
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              const result = this.list.some(item => item.code === value)
              if (result) {
                callback('权限标识重复')
              } else {
                let found = false
                this.list.forEach(item => {
                  if (item.children) {
                    item.children.forEach(ite => {
                      if (ite.code === value) {
                        found = true
                      }
                    })
                  }
                })
                found ? callback('二级权限标识错误') : callback()
              }
            }
          }]
      },
      title: '添加权限点',
      editId: null

    }
  },
  created() {
    this.getPermissionList()
  },
  methods: {
    async getPermissionList() {
      this.list = transListToTreeData(await getPermissionList(), 0)
    },
    // 添加权限
    async addPer(row, type) {
      // 假如id存在我就是添加子节点 不是添加一级节点
      if (type === 'add') {
        this.title = '添加权限点'
        // 二级
        this.formData.pid = row.id
        this.formData.type = 2
        this.dialogPermission = true
      } else if (type === 'parent') {
        this.title = '添加权限点'
        // 一级
        this.formData.pid = 0
        this.formData.type = 1
        this.dialogPermission = true
      } else if (type === 'edit') {
        // 编辑
        this.title = '编辑权限点'
        const result = await getPermissionDetail(row.id)
        this.formData = result
        this.list = this.list.filter(item => {
          let list = []
          list = item.code !== result.code
          if (item.children) {
            item.children = item.children.filter(ite => ite.code !== result.code)
          }
          return list
        })
        this.editId = row.id
        this.dialogPermission = true
      } else if (type === 'del') {
        // 删除
        this.$confirm('你确定要删除吗').then(async() => {
          await delPermission(row.id)
          this.$message.success('删除成功')
          this.getPermissionList()
        })
      }
    },
    // 关闭弹层 清空表单
    close() {
      this.dialogPermission = false
      this.$refs.form.resetFields()
      this.formData = {
        name: '', // 名称
        code: '', // 标识
        description: '', // 描述
        type: '', // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
        pid: '', // 因为做的是树 需要知道添加到哪个节点下了
        enVisible: '0' // 默认关闭
      }
      this.title = '添加权限点'
      this.getPermissionList()
    },
    // 确定按钮添加权限
    btnAdd() {
      this.$refs.form.validate(async(isOk) => {
        if (isOk) {
          if (this.title === '编辑权限点') {
            await updatePermissionDetail({ ...this.formData, id: this.editId })
            this.$message.success('编辑成功')
          } else {
            await addPermission(this.formData)
            this.$message.success('添加成功')
          }
          this.close()
          this.getPermissionList()
        }
      })
    }

  }
}
</script>
<style>
.container{
  padding: 10px;
}
</style>
